Skip to content

feat(InfoTip): Add global escape close #3194

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

feat(InfoTip): Add global escape close #3194

wants to merge 10 commits into from
+209 −88

Conversation

@aresnik11
Copy link
Contributor

@aresnik11 aresnik11 commented Oct 22, 2025 •
edited
Loading

Overview

Adds a global escape close to floating InfoTips. Also moves focus back to info button after focus leaves the infotip.

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: GMT-218
  • I have run this code to verify it works
  • This PR includes unit tests for the code change
  • This PR includes testing instructions tests for the code change
  • The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

  1. Go to Infotip story
  2. Go to the floating placement story
  3. Open the info tip
  4. Click escape and confirm it closes and that focus is moved back to the info button 🎉
  5. Continue navigating via keyboard and confirm you move on to the next element
  6. Go to the with links or buttons story
  7. Open the info tip
  8. Click escape and confirm it closes and that focus is moved back to the info button 🎉
  9. Continue navigating via keyboard and confirm you move on to the next element
  10. Check it with VO
  11. Finish and do a celebratory dance

PR Links and Envs

Repository PR Link
Monolith Monolith PR
Mono Mono PR

@nx-cloud
Copy link

nx-cloud bot commented Oct 22, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit d325cb8

Command Status Duration Result
nx run-many --target=build --all ✅ Succeeded 18s View ↗
nx run-many --target=verify --parallel=3 --all ✅ Succeeded <1s View ↗

☁️ Nx Cloud last updated this comment at 2025-10-29 15:17:28 UTC

@aresnik11 aresnik11 changed the title Ajr global esc close infotip feat(InfoTip): Add global escape close Oct 27, 2025
@aresnik11 aresnik11 marked this pull request as ready for review October 27, 2025 18:26
@aresnik11 aresnik11 requested a review from a team as a code owner October 27, 2025 18:26
@codecademydev
Copy link
Collaborator

📬 Published Alpha Packages:

@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

@github-actions
Copy link
Contributor

🚀 Styleguide deploy preview ready!

Preview URL: https://690230c53f76e5d9a496e006--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/690230c53f76e5d9a496e006

LinKCoding
LinKCoding approved these changes Oct 29, 2025
View reviewed changes
Copy link
Contributor

@LinKCoding LinKCoding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Works well in SB and left one tiny nit
🔥

packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx

const InfoTipExample: React.FC<InfoTipProps> = (args) => {
return (
export const Default: Story = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love all these changes, thanks~

packages/gamut/src/Tip/InfoTip/index.tsx
// Focus is leaving the InfoTip system entirely (via Tab, arrow keys, or any navigation)
// Return it to the button to maintain logical focus order
buttonRef.current?.focus();
} else if (relatedTarget === null) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: could this just be an else? Is there an edge case you're trying to cover here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@LinKCoding LinKCoding LinKCoding approved these changes

@dreamwasp dreamwasp Awaiting requested review from dreamwasp dreamwasp is a code owner automatically assigned from Codecademy/gamut

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@aresnik11 @codecademydev @LinKCoding @dreamwasp